<script setup>
import util from '@/utils/util'
import {FileMapping} from '@/utils/resource'
import {nextTick, reactive, ref} from "vue";
import {ElMessage} from "element-plus";

const pros = defineProps({
  id: {
    type: String,
    default: "new"
  },
  parent: {
    type: String,
    default: ""
  },
  parentName: {
    type: String,
    default: ""
  },
})
const loading = ref(false);
const form = ref(null);
const imgs = ref([]);
const id = pros.id;
const parent = pros.parent;
const parentName = pros.parentName;
const state = reactive({
  form: {
    parentId: 0,
  },
  params: {
    token: "",
    key: ""
  },
})

load()
async function load() {
  loadToken();
  loadImg()
}

async function loadToken() {
  let res = await FileMapping.uploadToken()
  state.params.token = res.data.data
}


async function loadImg() {
  loading.value = true
  state.form.parentId = parent
  let res = await FileMapping.list({parent: state.form.parentId})
  imgs.value = res.data
  await nextTick()
  loading.value = false
}


function beforeUpload(file) {
  let isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessage.error('上传图片大小不能超过 2MB!')
    return false
  }
  let ext = file.name.substr(file.name.lastIndexOf('.') + 1)
  if (ext !== "jpg" && ext !== "jpeg" && ext !== "png") {
    ElMessage.error('上传图片只能是 JPG/PNG 格式!')
    return false
  }
  state.params.key = util.shorten() + file.name.substr(file.name.lastIndexOf('.'))
  return true
}

async function handleRemove(file, fileList) {
  await FileMapping.del(file.id)
  ElMessage({
    type: 'success',
    message: '删除成功!'
  });
}

async function handelSuccess(response, file, fileList) {
  let item = {
    parent: state.form.parentId,
    name: file.name,
    mime: file.raw.type,
    size: file.size,
    hash: response.hash,
    key: response.key,
    ext: file.name.substr(file.name.lastIndexOf('.') + 1),
    folder: 0,
  }
  await FileMapping.save(item, "post")

  let total = fileList.length
  let succcessed = 0
  fileList.forEach(f => {
    if (f.status === "success" || f.id) {
      succcessed++
    }
  })
  if (total === succcessed) {
    await loadImg()
  }
}

</script>

<template>
  <div>
    <div style="padding-left: 20px">
      <p style="font-size: 20px">文件上传</p>
      <el-upload
          class="upload-demo"
          ref="upload"
          action="http://upload.qiniup.com/"
          :before-upload="beforeUpload"
          :on-success="handelSuccess"
          :on-remove="handleRemove"
          :data="state.params"
          list-type="picture"
          :file-list="imgs"
          :multiple="true"
          accept="image/*">
        <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg / png文件</div>
      </el-upload>
    </div>
    <div style="padding: 15px">
      <router-link to="/fileMapping">
        <el-button plain round icon="Back" type="info">返回</el-button>
      </router-link>
    </div>
  </div>
</template>

<style scoped>
</style>
